<template>
  <div class="dialog">
    <el-dialog title="优惠卷详情" :visible.sync="dialogVisible">
      <el-form
        :model="ticket"
        :rules="rules"
        ref="ticket"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名字：" prop="name">
          <el-input v-model="ticket.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="description">
          <el-input v-model="ticket.description" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-input type="hidden" v-model="ticket.id"></el-input>
        <div class="formItem">
          <el-form-item label="开始时间" prop="beginDate">
            <el-date-picker
              style="flex: 1;"
              v-model="ticket.beginDate"
              type="datetime"
              value-format="yyyy-MM-dd hh:mm:ss"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endDate">
            <el-date-picker
              style="flex: 1;"
              v-model="ticket.endDate"
              type="datetime"
              value-format="yyyy-MM-dd hh:mm:ss"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
        </div>

        <div class="formItem">
          <el-form-item label="订单额超过" prop="overAmount">
            <el-input
              v-model="ticket.overAmount"
              type="number"
              placeholder="请输入内容"
              :disabled="disableTicketEdit"
            ></el-input>
          </el-form-item>
          <el-form-item label="优惠金额" prop="subtractAmout">
            <el-input
              v-model="ticket.subtractAmout"
              type="number"
              placeholder="请输入内容"
              :disabled="disableTicketEdit"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item label="发送的类型" prop="type">
          <el-select
            @change="changeType"
            v-model="ticket.type"
            placeholder="请选择"
            :disabled="disableTicketEdit"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="showSubType" label="子发送类型" prop="subType">
          <el-select
            @change="changeSubType"
            v-model="ticket.subType"
            placeholder="请选择"
            :disabled="disableTicketEdit"
          >
            <el-option
              v-for="item in subTypeOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="showTypeValue"
          :label="typeValueLabel"
          prop="typeValue"
          :disabled="disableTicketEdit"
        >
          <el-select
            filterable
            remote
            :remote-method="remoteMethod"
            :loading="loading"
            v-model="ticket.typeValue"
            placeholder="请输入关键词"
          >
            <el-option
              v-for="item in typeValueOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="showSelectCustomer"
          label="选择客户"
          prop="customerIds"
          :disabled="disableTicketEdit"
        >
          <el-select
            multiple
            filterable
            remote
            :remote-method="remoteSelectCustomerMethod"
            :loading="loading"
            v-model="ticket.customerIds"
            placeholder="请输入关键词"
          >
            <el-option
              v-for="item in customerOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">确定</el-button>
          <el-button @click="cancelClick()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";

export default {
  // id即编辑的id，visible属性用来监听是否显示弹窗
  props: ["id", "visible"],
  components: {},
  watch: {},
  computed: {
    disableTicketEdit: {
      get() {
        if (this.ticket) {
          if (
            this.ticket.status === 2 ||
            this.ticket.status === 3 ||
            this.ticket.status === 4
          ) {
            return true;
          }
        }
        return false;
      }
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    },
    subTypeOptions: {
      get() {
        if (this.ticket.type == 1) {
          return this.subTypes1;
        } else if (this.ticket.type == 2) {
          return this.subTypes2;
        } else if (this.ticket.type == 4) {
          return this.subTypes3;
        } else {
          return [];
        }
      }
    },
    typeValueLabel: {
      get() {
        if (this.ticket.subType == 5) {
          this.subTypeUrl = "sendMessage/checkActivity";
          return "筛查活动";
        } else if (this.ticket.subType == 6) {
          this.subTypeUrl = "sendMessage/store";
          return "门店";
        } else if (this.ticket.subType == 7) {
          this.subTypeUrl = "sendMessage/doctor";
          return "医生";
        } else if (this.ticket.subType == 8) {
          this.subTypeUrl = "sendMessage/distribute";
          return "分销商";
        } else if (this.ticket.subType == 9) {
          this.subTypeUrl = "sendMessage/customerTel";
          return "客户";
        }
      }
    }
  },
  data() {
    return {
      rules: {},
      ticket: {
        id: "",
        status: null,
        beginDate: "",
        endDate: "",
        overAmount: "",
        subtractAmout: "",
        type: "",
        subType: "",
        typeValue: "",
        customerIds: [],
        name: "",
        description: ""
      },
      typeOptions: [
        { key: 0, label: "所有人" },
        { key: 1, label: "按客户类型" },
        { key: 2, label: "按客户来源" },
        { key: 3, label: "选择客户" },
        { key: 4, label: "客户会员等级" },
        { key: 5, label: "注册送优惠卷" }
      ],
      subTypes1: [
        { key: 1, label: "客户" },
        { key: 2, label: "医生" },
        { key: 3, label: "员工" },
        { key: 4, label: "分销商" }
      ],
      subTypes2: [
        { key: 5, label: "筛查活动" },
        { key: 6, label: "门店" },
        { key: 7, label: "医生" },
        { key: 8, label: "分销商" },
        { key: 9, label: "客户" },
        { key: 10, label: "其他" }
      ],
      subTypes3: [],
      showSubType: false,
      showTypeValue: "",
      showSelectCustomer: false,
      typeValueOptions: [],
      customerOptions: [],
      subTypeUrl: "",
      loading: false
    };
  },
  methods: {
    async ininDict() {
      await get("preferentialTicket/getMemberLevel").then(res => {
        this.subTypes3 = res.data.data;
      });
    },
    getTicket(id) {
      get("preferentialTicket/getPreferentialTicket", { id: id }).then(res => {
        this.ticket = res.data.data;
        this.customerOptions = res.data.data.initCustomerOptions;
      });
    },
    changeType(key) {
      this.ticket.subType = null;
      this.ticket.typeValue = null;
      this.customerOptions = [];
      this.ticket.customerIds = [];
      this.typeInit(key);
    },
    typeInit(key) {
      this.showTypeValue = false;
      this.showSelectCustomer = false;
      if (key == 1 || key == 2 || key == 4) {
        this.showSubType = true;
      } else {
        this.showSubType = false;
      }
      if (key == 2) {
        this.showTypeValue = true;
      }
      if (key == 3) {
        this.showSelectCustomer = true;
      }
    },
    changeSubType(key) {
      if (key) {
        this.ticket.typeValue = null;
        this.typeValueOptions = [];
      }
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        get(this.subTypeUrl, { name: query }).then(res => {
          this.loading = false;
          this.typeValueOptions = res.data.data;
        });
      } else {
        this.typeValueOptions = [];
      }
    },
    remoteSelectCustomerMethod(query) {
      if (query !== "") {
        this.loading = true;
        get("sendMessage/customerAllByTel", { tel: query }).then(res => {
          this.loading = false;
          this.customerOptions = res.data.data;
        });
      } else {
        this.customerOptions = [];
      }
    },
    // 确认保存
    submitForm() {
      let param = { ...this.ticket };
      this.$refs.ticket.validate(valid => {
        if (valid) {
          let url = param.id
            ? "/preferentialTicket/updatePreferentialTicket"
            : "/preferentialTicket/addPreferentialTicket";
          postJson(url, param).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            this.dialogVisible = false;
            this.$emit("success");
          });
        } else {
          return false;
        }
      });
    },
    cancelClick() {
      this.dialogVisible = false;
    },
    initEdit(row) {
      if (row) {
        get("preferentialTicket/getPreferentialTicket", { id: row.id }).then(
          res => {
            this.ticket = res.data.data;
            this.ticket.status = row.status;
            this.typeInit(this.ticket.type);
            this.customerOptions = res.data.data.initCustomerOptions;
            if (this.ticket.type == 2) {
              if (this.ticket.subType == 5) {
                get("sendMessage/getCheckActivity", {
                  id: row.typeValue
                }).then(res => {
                  this.typeValueOptions = res.data.data;
                });
              } else if (row.subType == 6) {
                get("sendMessage/getStore", { id: row.typeValue }).then(res => {
                  this.typeValueOptions = res.data.data;
                });
              }
              if (row.subType == 7) {
                get("sendMessage/getDoctor", { id: row.typeValue }).then(
                  res => {
                    this.typeValueOptions = res.data.data;
                  }
                );
              }
              if (row.subType == 8 || row.subType == 9) {
                get("sendMessage/getCustomer", { id: row.typeValue }).then(
                  res => {
                    this.typeValueOptions = res.data.data;
                  }
                );
              }
            }
          }
        );
      } else {
        this.ticket = {
          id: "",
          beginDate: "",
          endDate: "",
          overAmount: "",
          subtractAmout: "",
          type: "",
          subType: "",
          typeValue: "",
          customerIds: [],
          name: "",
          description: ""
        };
        this.showSubType = false;
        this.showTypeValue = "";
        this.showSelectCustomer = false;
        this.typeValueOptions = [];
        this.customerOptions = [];
        this.subTypeUrl = "";
        this.loading = false;
      }
    }
  },
  mounted() {},
  created() {
    this.ininDict();
  }
};
</script>

<style lang="less">
</style>
